<template>
	<div class="regulation_list_wrapper">
		<div class="headbox">
			<h2>政策法规</h2>
		</div>
		<div class="filter">
			<h2>部门</h2>
			<el-radio-group v-model="classifyId">
				<el-radio label="">全部</el-radio>
				<el-radio v-for="(item, index) in departData" :key="index" :label="item.id">{{ item.name }}</el-radio>
			</el-radio-group>
		</div>
		<article-list column-id="204" :depart-id="classifyId"></article-list>
	</div>
</template>

<script>
import articleList from '@/views/common/articleList';
import { getQueryDeptList } from '@/api/web/sysNewsContents';
export default {
	components: { articleList },
	data() {
		return {
			departData: [],
			classifyId: ''
		};
	},
	mounted() {
		this.getDepartData();
	},
	methods: {
		//获取部门列表
		async getDepartData() {
			let result = await getQueryDeptList('204').then((res) => res.data);
			if (result.code === '0') {
				this.departData = !result.data ? [] : [...result.data];
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.regulation_list_wrapper {
	.headbox {
		display: flex;
		align-items: center;
		padding: 0 15px;
		height: 72px;
		background: url('../../assets/img/bg_headbox.png') no-repeat center;
		border: solid 1px #f4f4f4;
		h2 {
			font-size: 24px;
			line-height: 66px;
			font-weight: bold;
			font-family: 'simsun';
			color: #357c65;
			border-bottom: solid 3px #357c65;
			padding-top: 3px;
		}
	}
	.filter ::v-deep {
		display: flex;
		align-items: center;
		height: 60px;
		border: solid 1px #f4f4f4;
		border-top: none;
		h2 {
			flex-shrink: 0;
			font-size: 16px;
			font-weight: normal;
			line-height: 60px;
			padding: 0 15px;
			border-right: solid 1px #f4f4f4;
		}
		.el-radio-group {
			margin-left: 15px;
		}
		.el-radio__label {
			font-size: 16px;
		}
	}
}
</style>
